<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 本地 -->
    <script src="../js/jquery-1.10.1.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        #tips {
            background-color: grey;
            line-height: 45px;
        }

        .list {
            padding: 10px 0;
            background-color: #f1f1f1;
            overflow: hidden;
        }

        .list li {
            height: 32px;
            line-height: 32px;
            border: 1px dashed #333;
        }

        .list .newLi {
            border-color: red;
        }

        .list .active {
            background-color: #6ff;
        }


        /* div[class]{} */
        /* div[class='wrap'] */
        /* div[class][title] {} */

        /* div:not([class]) {
            width: 100px;
        } */
    </style>

</head>

<body>
    <!-- <input hidden type="text"> -->
    <div class="wrap">
        <h3 id="tips">jquery</h3>
        <div class="list">
            <li class="first" title="hei">01</li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <li class="last"><span class="test">06</span></li>
        </div>
    </div>
</body>
<script>

    // 父元素
    // 子元素
    // 同级元素 

    // 父元素
    // parent()   获取匹配元素的父元素
    // console.log($(".test"));
    // console.log($(".test").parent());
    // console.log($(".test").parent().parent());

    // parents()  获取匹配元素的父代元素的集合  
    // parents(selector)    selector 用于筛选父代元素的表达式   => 快速找到满足条件的父元素
    // parentsUntil()      获取匹配元素的父代元素的集合,知道某个元素为止

    // console.log($(".test").parents());
    // console.log($(".test").parents(".list"));
    // console.log($(".test").parents("div"));

    // closest(selector)    selector 用于筛选父代元素的表达式  => 从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素。。
    // console.log($(".test").closest("div"));


    // 子元素
    // children()        获取匹配元素的自元素
    // children(selector)   selector 用于筛选子元素的表达式
    // console.log($(".list").children());
    // console.log($(".list").children(".first"));
    // console.log($(".list").children("[class]"));

    // prev()       获取匹配元素的前一个同级元素
    // prevAll()    获取匹配元素的前所有的同级元素
    // prevUntil(selector)    获取匹配元素的前所有的同级元素,知道遇到某个元素为止
    // $(".last").prev().css({ background: "red" });
    // $(".last").prevAll().css({ background: "red" });
    // $(".last").prevUntil(".first").css({ background: "red" });

    // next() 
    // nextAll() 
    // nextUntil() 


    // find()  搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
    // 通过父元素进行链式查找 子代元素
    // console.log($(".wrap"));
    // console.log($(".wrap").find(".list"));
    // console.log($(".wrap").find(".list").find(".last"));
    // console.log($(".wrap").find(".last"));

    // console.log($(".wrap .last"));

    // end()  回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。
    // console.log($(".wrap"));
    // console.log($(".wrap").find(".list").end());
    // console.log($(".wrap").find(".list").find(".last").end().end());

    console.log($(".wrap").find(".last").end());




</script>


</html>